<!DOCTYPE HTML>
<html>

<head>
  <title>Cart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="/css/bootstrap.css" rel='stylesheet' type='text/css' />
  <link href="/css/style.css" rel='stylesheet' type='text/css' />
  <link href="/css/megamenu.css" rel="stylesheet" type="text/css" media="all" />
  <!-- 注意路径的正确性 -->
  <script src="/libs/requirejs/require.js" data-main="/js/cart"></script>
</head>

<body>
  <div class="wrap">
    <div class="container">
      <!-- 头部 -->
      <header></header>

      <div class="content">
        <div class="content_box">
          <div class="men cart cart-empty">
            <h1>It appears that your cart is currently empty!</h1>
            <h2>You can continue browsing <a href="/html/list.html">here</a>.</h2>
          </div>
          <!-- 购物车表格 -->
          <div class="men cart hidden">
            <table class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th><label><input type="checkbox" class="chk-all">全选</label></th>
                  <th>商品编号</th>
                  <th>图片</th>
                  <!-- 标题给四个列的宽度 -->
                  <th class="col-md-4">标题</th>
                  <th>价格</th>
                  <th>数量</th>
                  <th>小计</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody class="cart-body">

              </tbody>
              <tfoot>
                <tr>
                  <td>合计</td>
                  <td colspan="7" class="total-price"></td>
                </tr>
              </tfoot>

            </table>
          </div>
          <!-- 尾部 -->
          <footer></footer>
        </div>
      </div>
      <script type="text/html" id="cart-template">
        {{each cart prod}}
        <tr data-id="{{prod.id}}">
          <td><input type="checkbox" class="chk-prod"></td>
          <td>{{prod.id}}</td>
          <td><img src="{{prod.image}}" alt="" style="width:40px;"></td>
            <td>{{prod.title}}</td>
            <td>{{prod.price}}</td>
            <td>
              <div class="input-group">
                <span class="input-group-addon decrement" style="cursor: pointer;">-</span>
                <input type="text" class="form-control text-center prod-amount" value="{{prod.amount}}">
                  <span class="input-group-addon increment" style="cursor: pointer;">+</span>
                    </div>
                  </td>
              <td class="sub">{{(prod.price*prod.amount).toFixed(2)}}</td>
              <td><a href="javascript:void(0)" class="del">删除</a></td>
                </tr>
                {{/each}}
      </script>
</body>

</html>